<template style="padding:0px 8px">
  <div style="padding:0px 8px">
    <el-card shadow="always" class="configContainer">
      <div style="display: flex;flex-direction: row;align-items: center">
        <h4 class="card-title"> 角色管理 </h4>
        <div class="space"/>
        <el-button type="primary" @click="showAdd">新增角色</el-button>
      </div>
      <el-divider/>
      <div style="margin: 8px">
        <div class="searchDiv">
          <el-input clearable v-model="searchForm.id" placeholder="权限id" style="width:200px;margin-right: 16px;"/>
          <el-input clearable v-model="searchForm.name" placeholder="权限代码" style="width:200px;margin-right: 16px;"/>
          <el-input clearable v-model="searchForm.description" placeholder="权限名" style="width:200px;margin-right: 16px;"/>
          <el-button type="primary" @click="getRole">
            <el-icon>
              <Search/>
            </el-icon>
            搜索
          </el-button>
          <el-button @click="reset()">重置</el-button>
        </div>
        <el-table height="400px" :header-cell-style="{background:'#f8f8f8',height:'40px',color:'#2b2b2b'}"
                  :data="roleList" style="width: 100%;margin-top: 16px;"
                  @selection-change="handleSelectionChange">
          <el-table-column fixed prop="id" label="id" width="120">
          </el-table-column>
          <el-table-column fixed prop="name" label="权限代码">
          </el-table-column>
          <el-table-column fixed prop="description" label="权限名">
          </el-table-column>

          <el-table-column fixed prop="create_time" label="创建时间">
          </el-table-column>
          <el-table-column fixed prop="update_time" label="更新时间">
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="showEdit(scope.row)">
                <el-icon>
                  <Edit/>
                </el-icon>
                编辑
              </el-button>
              <el-popconfirm title="确认删除吗?" @confirm="delRole(scope.row.id)">
                <template #reference>
                  <el-button link type="danger" size="small">
                    <el-icon>
                      <Delete/>
                    </el-icon>
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            :page-sizes="[10, 20, 50, 100]"
            :page-count="pagecount"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="currentChange"
            style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
            background layout="total, sizes, prev, pager, next, jumper"/>
      </div>

    </el-card>
  </div>

  <el-dialog v-model="show" title="新增角色">
    <el-form ref="add" :model="addForm" :rules="addRules">
      <el-form-item label="角色名" label-width="100px" prop="description">
        <el-input v-model='addForm.description'></el-input>
      </el-form-item>
      <el-form-item label="角色代码" label-width="100px" prop="name">
        <el-input v-model='addForm.name'></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="show = false">取消</el-button>
      <el-button type="primary" @click="addRole()">确定</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="show_edit" title="更新角色">
    <el-form ref="edit" :rules="addRules" :model="editForm">
      <el-form-item label="角色名" label-width="100px" prop="description">
        <el-input v-model='editForm.description'></el-input>
      </el-form-item>
      <el-form-item label="角色代码" label-width="100px" prop="name">
        <el-input v-model='editForm.name'></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
                <el-button @click="show_edit = false">取消</el-button>
                <el-button type="primary" @click="editRole()">确定</el-button>
    </template>
  </el-dialog>

  <CompanyText/>
</template>

<script>
import CompanyText from "../../../components/CompanyText.vue";

export default {
  name: "schoolManagerPage",
  props: {
    // msg: String
  },
  components: {
    CompanyText
  },
  data() {
    return {
      addRules: {
        description: [{required: true, message: "角色名必填", tirgger: blur},],
        name: [{required: true, message: "角色代码必填", tirgger: blur},]
      },
      rules: {},
      total: 1,
      editRoleId: 1,
      editRoleDescription: "",
      editRoleName: "",

      searchForm: {
        id: "",
        name: "",
        description: "",
        current: 1,
        size: 10,
      },
      addForm: {
        name: "",
        description: "",
      },
      editForm: {
        name: "",
        description: "",
      },
      roleList: [],
      contact: '',
      name: '',
      phone: '',
      show: false,
      show_edit: false
    }
  },
  created() {
    this.getRole();
  },
  methods: {
    showEdit(item) {
      this.show_edit = true;
      this.editForm = {...item}
    },
    showAdd() {
      this.show = true;
    },
    reset() {
      this.searchForm = {};
      this.getRole();
    },
    getRole() {
      let that = this;
      this.$http.post('/role/getRulePageList', that.searchForm).then(function (response) {
        console.log('success' + response);
        that.roleList = response.data.records;
        that.pagecount = response.data.pages;
        that.total = response.data.total;
        that.current = response.data.current;
      }).catch(function (error) {
        console.log('error');
      });
    },
    addRole() {
      let that = this;
      this.$refs.add.validate((valid, fields) =>{
      if(valid){
          this.$http.post('/role/addRole', that.addForm).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              that.$message.success(response.userMsg)
              that.show = false;
              that.getRole()
              that.$refs.add.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })

    },
    delRole(id) {
      let that = this;
      this.$http.post('/role/delRole', {
        "id": id,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          that.$message.success(response.userMsg)
          that.show_edit = false;
          that.getRole()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    editRole() {
      let that = this;
      this.$refs.edit.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/role/editRole', that.editForm).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              that.$message.success(response.userMsg)
              that.show_edit = false;
              that.getRole()
              that.$refs.edit.resetFields();
              that.editForm = {}
            }
          }).catch(function (error) {
            console.log('error');
          });
        }})
    },
    currentChange(current) {
      this.searchForm.current = current;
      console.info(this.current)
      this.getRole();
    },
    handleSizeChange(size) {
      this.searchForm.size = size;
      console.info(this.size)
      this.getRole();
    },
  },
}
</script>

<style scoped>

.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}

</style>
